<template>
  <div id='warning'>
    . 地震速报
    <div style="flex:1;" id="'operationEcharts" ref="operationEcharts"></div>
    <div style="flex:2;">
      <div>
        <el-dropdown @command="handleCommand" style="display: inline-block;" trigger="click">
          <span class="el-dropdown-link">
            {{monthName}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in month" :command="item" :key="index">{{item}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="title">每日运行详情</div>
      </div>
      <div class="table">
        <el-table v-loading="loading" height="300" :data="dataList" border>
          <el-table-column label="信息ID" show-overflow-tooltip align="center" prop="eqrId" />
          <el-table-column label="发布单位" show-overflow-tooltip align="center" prop="sender" />
          <el-table-column label="签发时间" show-overflow-tooltip align="center" prop="sendTime" />
          <el-table-column label="发震时间" show-overflow-tooltip align="center" prop="oriTime" />
          <el-table-column label="震中地名" show-overflow-tooltip align="center" prop="locName" />
          <el-table-column label="经度" show-overflow-tooltip align="center" prop="epiLon">
            <template slot-scope="scope">
              <span>{{scope.row.epiLon !== null ? scope.row.epiLon + '°' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="纬度" show-overflow-tooltip align="center" prop="epiLat">
            <template slot-scope="scope">
              <span>{{scope.row.epiLat !== null ? scope.row.epiLat + '°' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="深度" show-overflow-tooltip align="center" prop="focDep">
            <template slot-scope="scope">
              <span>{{scope.row.focDep !== null ? scope.row.focDep + 'km' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="震级" show-overflow-tooltip align="center" prop="magnitude" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script>
import { getQuickList } from '@/api/runningLog/runningLog.js';

import * as echarts from 'echarts';
export default {
  name: 'warning',
  components: {},
  props: ['deviceCode'],
  data() {
    return {
      data: [],
      loading: false,
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      monthName: new Date().getMonth() + 1,
      month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      dom: null,
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.$nextTick(() => {
      this.init(this.data);
    });
  },
  beforeCreate() {},
  beforeMount() {},
  watch: {
    monthName() {
      console.log('触发');
    },
  },
  methods: {
    init(data) {
      this.dom && this.dom.dispose();
      this.dom = echarts.init(this.$refs['operationEcharts']);
      const year = new Date().getFullYear();
      const _this = this;
      let xData = (() => {
        let arr = [];
        for (let index = 1; index <= 12; index++) {
          arr.push(`${year}-${index >= 10 ? index : '0' + index}`);
        }
        return arr;
      })();
      let option = {
        grid: {
          left: '4%',
          right: '0',
          bottom: '15%',
          top: '25%',
        },
        legend: {
          show: true,
          type: '',
          left: '10',
          top: '10',
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          backgroundColor: null,
          formatter: (params) => {
            let str = `
            <div style='padding: 10px;background-color: #fff;border-radius: 5px;color: #595959;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.18);'>
              <div style="padding: 5px;">${params[0].axisValueLabel}</div>
              <div>
                <span style=\"display:inline-block;margin-right:5px;width:10px;height:10px;background-color:rgba(91, 143, 249, 1);\"></span>
                <span>${params[0].value}</span>
              </div>
              <div>
                <span style=\"display:inline-block;margin-right:5px;width:10px;height:10px;background-color:rgba(90, 216, 166, 0.85);\"></span>
                <span>${params[1].value}</span>
              </div>
            </div>`;
            return str;
          },
        },
        color: ['rgba(91, 143, 249, 1)', 'rgba(90, 216, 166, 0.85)'],
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            color: 'rgba(0, 0, 0, 0.45)',
            interval: 0,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.25)',
            },
          },
        },
        yAxis: {
          show: true,
          type: 'value',
          splitLine: {
            show: false,
          },
          // max: 100,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.25)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: (params) => {
              return `${params}`;
            },
          },
        },
        series: [
          {
            name: '理论包数',
            data,
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              distance: 10,
              // barWidth: 10,
            },
          },
          {
            name: '实际包数',
            data,
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              distance: 10,
              // barWidth: 10,
            },
          },
        ],
      };
      this.dom.setOption(option);
      this.dom.getZr().on('click', function (params) {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (_this.dom.containPixel('grid', pointInPixel)) {
          let xIndex = _this.dom.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
          ])[0];
          let date = new Date(xData[xIndex]).getMonth() + 1;
          _this.monthName = date;
        }
      });

      addEventListener('resize', () => {
        _this.dom.resize();
      });
    },
    async getList() {
      const res = await getQuickList({
        deviceCode: this.deviceCode,
        month: this.monthName,
      });
      if (res.code == 200) {
        this.dataList = res.data;
        // this.total = res.total;
      }
    },
    handleCommand(command) {
      this.monthName = command;
    },
  },
};
</script>
<style lang='scss' scoped>
#warning {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    display: inline-block;
    margin-bottom: 16px;
    margin-left: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    text-align: left;
  }
  .el-dropdown-link {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
  }
}
</style>